// 创建一个页头组件
<template>
  <div class="wh-quick-menu">
    <div class="container">
      <router-link to="/">
        <img src="@/assets/香格里拉logo2.png" alt="" />
      </router-link>
      <!--logo-->
      <div class="wh-head">
        <span class="wh-head-item"><i>免费订房热线:</i><i>400-000-111</i></span
        >    
      </div>
      <!-- 头部右边 -->
      <!-- <li class="wh-nav-item">
        <i class="el-icon-user" v-if="islogin"></i>
        <i v-if="islogin">欢迎{{ username }}</i>
        <router-link  class="logout" @click="exit()"  v-if="islogin">&nbsp;退出</router-link>
      </li> -->
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    // 退出登录
    exit() {
      this.$confirm("退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          setTimeout(() => {
            this.$store.commit("exit");
            this.$router.push("/login");
            this.$message({
              type: "success",
              message: "已退出登录!",
            });
          }, 1000);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
};
</script>
<style  scoped>
.num {
  color: black;
  background-color: white;
  float: left;
  position: relative;
  margin-left: 10px;
}

.container {
  width: 100%;
  height: 100%;
  margin: 10 auto;
}
.wh-quick-menu {
  position: relative;
  font-size: 16px;
  color: #999;
  background-color: #fff;
  height: 45px;
  text-align: right;
}

.wh-head {
  display: inline-block;
  line-height: 45px;
}

/* 所有span标签呈行内块元素显示 */
.wh-nav-item {
  margin-left: 12px;
  display: inline-block;
}

/* 页头文字的左外边距 */
i[data-v-1e8333ae] {
  margin-right: 7px;
}

/* logo图标的大小 */
img {
  width: 120px;
  height: 30px;
  margin-top: 10px;
}
.logout {
  text-decoration: none;
  color: #409eed;
}
</style>